<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 省市区-街道选择 begin -->
<div class="overlay" id="areaPart" style="display: none;">
	<div class="szdq_part">
		<div class="hd">
			<h3>所在地区</h3>
			<span> <a href="#" ><h3 style="color:red;">完成</h3></a></span>
		</div>
		<div class="bd">
			<div class="dq_nav">
				<ul>
					<li id="provinceLi" class="current"><a id="provinceA" href="#" onclick="javascript: reloadArea('province', 1);">省<i></i></a></li>
					<li id="cityLi"><a id="cityA" href="#" onclick="javascript: reloadArea('city', $('#provinceCode').val());">市<i></i></a></li>
					<li id="areaLi"><a id="areaA" href="#" onclick="javascript: reloadArea('area', $('#cityCode').val());">区县<i></i></a></li>
					<li id="streetLi"><a id="streetA" href="#" onclick="javascript: reloadArea('street', $('#areaCode').val());">街道<i></i></a></li>
				</ul>
			</div>
			<div class="dq_list" id="provinceDiv" style="display: none;">
				<ul id="provinceUl">
				</ul>
			</div>
			<div class="dq_list" id="cityDiv" style="display: none;">
				<ul id="cityUl">
				</ul>
			</div>
			<div class="dq_list" id="areaDiv" style="display: none;">
				<ul id="areaUl">
				</ul>
			</div>
			<div class="dq_list" id="streetDiv" style="display: none;">
				<ul id="streetUl">
				</ul>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		$('#areaPart .hd span a').click(function() {
			var provinceName = $("#provinceName").val();
			var cityName = $("#cityName").val();
			var areaName = $("#areaName").val();
			var streetName = $("#streetName").val();
			$("#city").val(provinceName + cityName + areaName + streetName);
			$('#areaPart').hide();
		});
		jQuery('.dq_nav ul li').click(function() {
			TabSelect(".dq_nav ul li", "div.dq_list", "current", jQuery(this))
		});
		$('.dq_list ul li').click(function(){
			$(this).addClass('current');
			$(this).siblings().removeClass('current');
		});
	});
	
	/**
	 * 初始化弹出层
	 */
	$("#city").click(function() {
		$('#areaPart').show();
		var provinceName = $("#provinceName").val();
		var cityName = $("#cityName").val();
		var areaName = $("#areaName").val();
		var streetName = $("#streetName").val();
		$("#provinceA").html(provinceName ? provinceName : '省');
		$("#cityA").html(cityName ? cityName : '市');
		$("#areaA").html(areaName ? areaName : '区县');
		$("#streetA").html(streetName ? streetName : '街道');
		$('.dq_nav ul li').removeClass('current');
		$('.dq_list').hide();
		$('#provinceLi').addClass('current');
		reloadArea('province', 1);
		$('#provinceDiv').show();
	});
	
	//tab function
	function TabSelect(tab, con, addClass, obj) {
		var jQuery_self = obj;
		var jQuery_nav = jQuery(tab);

		jQuery_nav.removeClass(addClass), jQuery_self.addClass(addClass);

		var jQuery_index = jQuery_nav.index(jQuery_self);
		var jQuery_con = jQuery(con);
		jQuery_con.hide(), jQuery_con.eq(jQuery_index).show();
	}
	
/**
 * 点击选择，确认地域
 * 实现联动
 */
function doSelectedLi(type, areaCode, areaName) {
	
	$("#" + type + "Ul li").removeClass('current');
	$("#" + (type + areaCode)).addClass('current');

	// 选择省
	if (type == 'province') {
		$('.dq_nav ul li').removeClass('current');
		$('#cityLi').addClass('current');
		//reloadArea('city', areaCode);
		$('.dq_list').hide();
		reloadArea('city', areaCode);

		$("#provinceA").html(areaName);
		$("#provinceCode").val(areaCode);
		$("#provinceName").val(areaName);

		$("#cityA").html('市');
		$("#areaA").html("区县");
		$("#streetA").html("街道");

		$("#cityCode").val('');
		$("#cityName").val('');
		$("#areaCode").val('');
		$("#areaName").val('');
		$("#streetCode").val('');
		$("#streetName").val('');
	} else if (type == 'city') {
		// 选择市
		$('.dq_nav ul li').removeClass('current');
		$('#areaLi').addClass('current');
		//reloadArea('city', areaCode);
		$('.dq_list').hide();
		reloadArea('area', areaCode);

		$("#cityA").html(areaName);
		$("#cityCode").val(areaCode);
		$("#cityName").val(areaName);

		$("#areaA").html("区县");
		$("#streetA").html("街道");

		$("#areaCode").val('');
		$("#areaName").val('');
		$("#streetCode").val('');
		$("#streetName").val('');
	} else if (type == 'area') {
		// 选择区
		$('.dq_nav ul li').removeClass('current');
		$('#streetLi').addClass('current');
		//reloadArea('city', areaCode);
		reloadArea('street', areaCode);

		$("#areaA").html(areaName);
		$("#areaCode").val(areaCode);
		$("#areaName").val(areaName);

		$("#streetA").html("街道");

		$("#streetCode").val('');
		$("#streetName").val('');
	} else if (type == 'street') {
		// 选择街道
		$("#streetA").html(areaName);
		$("#streetCode").val(areaCode);
		$("#streetName").val(areaName);
	}
}

/**
 * 重新加载指定级别区域
 */
function reloadArea(type, parentId) {
	var areaArr = getAreaList(parentId);
	var defaultCode = null;
	if (type == 'province') {
		defaultCode = $('#provinceCode').val();
	} else if (type == 'city') {
		defaultCode = $('#cityCode').val();
	} else if (type == 'area') {
		defaultCode = $('#areaCode').val();
	} else if (type == 'street') {
		defaultCode = $('#streetCode').val();
	}
	var html = '';
	if (areaArr && areaArr.length > 0) {
		for (var i = 0; i < areaArr.length; i++) {
			html += '<li id="' + (type + areaArr[i].id) + '" onclick="javascript: doSelectedLi(\'' + type + '\', '
					+ areaArr[i].id + ',\'' + areaArr[i].areaName + '\');" ';
			if (defaultCode == areaArr[i].id) {
				html += ' class="current" ';
			}
			html += '>';
			html += '<p><span >' + areaArr[i].areaName + '</span><i></i></p>';
			html += '</li>';
		}
	}
	$("#" + type + "Ul").html(html);
	$('.dq_list').hide();
	$('#' + type + 'Div').show();
}

/**
 * 区域
 * 
 * @Description do-something
 * @author xu_cc
 * @date 创建时间：2017年11月29日 下午5:10:19
 * @param parentId
 */
function getAreaList(parentId) {
	var params = null;
	if (parentId == 1) {
		// 省级
		params = {
			rootDepth : '1'
		};
	} else {
		params = {
			parentId : parentId
		};
	}
	var areaArr = null;
	$.ajax({
		type : "post",
		url : rootPath + '/area/getAreaList',
		data : params,
		async : false,
		datatype : "json",
		success : function(json) {
			areaArr = json;
		}
	});
	return areaArr;
}
</script>
<!-- 省市区-街道选择 end -->